<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中南民族大学校庆头像生成器</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <div class="back">
        <img class="background-image" src="images/scuec4.jpg" alt="背景图">
        <div class="background-overlay"></div>
    </div>
    
    <div class="container">
        <div class="header">
            <h1 class="title">百变头像框</h1>
        </div>
        
        <div class="preview-section">
            <div class="preview-title">预览效果</div>
            <div class="canvas-container">
                <canvas id="avatarCanvas" class="avatar-canvas"></canvas>
            </div>
            <div class="action-buttons">
                <button class="btn save-btn" id="saveAvatar">
                    <span class="btn-text">保存头像</span>
                </button>
                <button class="btn reset-btn" id="resetAvatar">
                    <span class="btn-text">重置</span>
                </button>
            </div>
             <div class="upload-section">
            <input type="file" id="avatarUpload" accept="image/*" style="display: none;">
            <button class="upload-btn" id="chooseAvatar">
                <span class="upload-text">上传头像</span>
            </button>
        </div>
        </div>
        
       
        
        <div class="avatar_choose">
            <div class="default-avatars">
                <div class="section-header">
                    <span class="section-title">选择默认头像</span>
                </div>
                <div class="avatar-scroll">
                    <div class="avatar-list">
                        <div class="avatar-item" v-for="avatar in defaultAvatars" :key="avatar.id" @click="selectDefaultAvatar(avatar.id)">
                            <img class="avatar-img" :src="avatar.url" :alt="avatar.name" @error="handleImageError">
                        </div>
                    </div>
                </div>
            </div>

            <div class="frame-section">
                <div class="section-header">
                    <span class="section-title">选择头像框</span>
                </div>
                <div class="frame-scroll">
                    <div class="frame-list">
                        <div class="frame-item" :class="{ active: frame.id === selectedFrame }" 
                             v-for="frame in frames" :key="frame.id" 
                             @click="selectFrame(frame.id)">
                            <div class="frame-preview" v-if="frame.id === 'none'">
                                <span class="frame-text">无框</span>
                            </div>
                            <img class="frame-preview" v-else :src="frame.preview" :alt="frame.name" @error="handleFrameError">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="tips">
            <p class="tip-text">提示：选择头像后，点击喜欢的头像框预览效果，满意后保存头像。</p>
            <p class="tip-text">注意：所有处理都在本地完成，不会上传您的头像到服务器。</p>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="scripts/script.js"></script>
</body>
</html>